<template>
  <div class="customerList w100p h100p">
    <van-search v-model="value" show-action placeholder="请输入客户名称/地址/采购人/电话" @search="onSearch" @cancel="onCancel" />
    <div class="flb bgWH headerTitle">
      <div class="total l20">
        <span>共</span>
        <span class="cYE mr2 ml2 f16">{{ customerList.length }}</span>
        <span>个客户</span>
      </div>
      <div class="cYE f14 l20" @click="showCustomerPopup({}, 'add')">+添加客户</div>
    </div>
    <div class="content">
      <div class="contentBox">
        <div v-for="(item, idx) in customerList" :key="idx" class="contentItem">
          <van-swipe-cell>
            <van-cell center is-link :clickable="true" :label="item.customerAddress" @click="customerJumpClick(item)">
              <template #title>
                <div @click.stop="showCustomerPopup(item, 'update')">{{ item.customerName }}</div>
              </template>
            </van-cell>
            <template #right>
              <van-button square type="danger" text="删除" class="h100p" @click.stop="delCustomerInfo(item)" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <van-popup v-model="showCustomer" round position="bottom">
      <van-form class="oyauto w100p" @submit="updateCustomerInfo">
        <div class="flc mt10">
          <van-cell-group inset :border="false">
            <van-field v-model="customerInfo.customerName" name="名称" label="名称" placeholder="名称" :rules="[{ required: true, message: '请填写名称' }]" />
            <van-field v-model="customerInfo.customerAddress" name="地址" label="地址" placeholder="地址" :rules="[{ required: true, message: '请填写地址' }]" />
          </van-cell-group>
        </div>
        <div style="margin: 16px;">
          <van-button color="#409eff" round block type="primary" native-type="submit">{{ companyStatus === 'add' ? '添加' : '更新' }}</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import pinyin from 'js-pinyin';
import { addCustomer, getAllCustomer, deleteCustomer, updateCustomer } from '../utils/api';
export default {
  data() {
    return {
      value: '',
      customerList: [],
      customerListOrg: [],
      showCustomer: false,
      customerInfo: {},
      companyStatus: 'add',
      customerId: ''
    };
  },
  mounted() {
    this.getCustomerList();
  },
  methods: {
    getPingyin(name) {
      return pinyin.getCamelChars(name);
    },
    onSearch() {
      this.customerList = this.customerListOrg.filter(item => item.customerName.indexOf(this.value) !== -1 || item.customerAddress.indexOf(this.value) !== -1 || item.customerPurchaserName.indexOf(this.value) !== -1 || item.customerPurchaserPhone.indexOf(this.value) !== -1);
    },
    onCancel() {
      this.customerList = this.customerListOrg;
    },
    // 弹框-增/改
    showCustomerPopup(item, type) {
      this.customerInfo = JSON.parse(JSON.stringify(item));
      this.companyStatus = type;
      this.showCustomer = true;
    },
    //增/改
    async updateCustomerInfo() {
      this.showCustomer = false;
      if (this.companyStatus === 'add') {
        await addCustomer({ ...this.customerInfo });
        this.$toast.success('客户信息添加成功！');
      } else {
        await updateCustomer({ ...this.customerInfo });
        this.$toast.success('客户信息更新成功！');
      }
      this.getCustomerList();
    },
    //删
    async delCustomerInfo(item) {
      await this.$async.confirm({ message: '确认要删除客户信息吗？' });
      await deleteCustomer({ id: item.id });
      this.$toast.success('客户信息删除成功！');
      this.getCustomerList();
    },
    //查
    async getCustomerList() {
      let res = await getAllCustomer();
      res.data.forEach(el => {
        el.sort = this.getPingyin(el.customerName);
      });
      res.data.sort((a, b) => a.sort.localeCompare(b.sort));
      this.customerList = res.data;
      this.customerListOrg = res.data;
    },
    //跳转客户下采购人列表
    customerJumpClick(item) {
      uni.postMessage({ data: `/pages/home/components/purchaserList?id=${item.id}` }); //eslint-disable-line
    }
  }
};
</script>
<style lang="less" scoped>
.customerList {
  .content {
    padding-top: 8px;
    height: calc(100% - 32px);
    box-sizing: border-box;
    .contentBox {
      height: 100%;
      overflow-y: auto;
      .contentItem {
        width: 100%;
        box-sizing: border-box;
        background: white;
        .group {
          /deep/ .van-cell {
            padding: 4px 16px !important;
          }
        }
      }
    }
  }
  /deep/ .van-field__label {
    width: 60px !important;
  }
  /deep/ .van-field__control {
    color: #969799 !important;
  }
}
</style>
